Skip to content

feat(FR-2890): speed up Vite dev server for remote sessions#7405

Merged
yomybaby merged 1 commit into
mainfrom
05-13-feat_fr-2890_speed_up_vite_dev_server_for_remote_sessions
May 13, 2026
Merged

feat(FR-2890): speed up Vite dev server for remote sessions#7405
yomybaby merged 1 commit into
mainfrom
05-13-feat_fr-2890_speed_up_vite_dev_server_for_remote_sessions

Conversation

@yomybaby
Copy link
Copy Markdown
Member

@yomybaby yomybaby commented May 13, 2026

Resolves #7404 (FR-2890)

Summary

Reduces slowest hard-refresh request on a remote dev session from ~12 s to ~3 s. Each change targets a different bottleneck identified by directly measuring response patterns on a remote browser session.

  • server.warmup.clientFiles (react/vite.config.ts) — pre-transforms the first-paint module set (entry → App → routes + eagerly-imported components/pages + BUI barrel) at startup, so the browser fetches them from Vite's in-memory cache instead of paying transform cost on the wire.
  • optimizeDeps.include (react/vite.config.ts) — pre-declares the heavy top-level deps used on the first-paint path (antd, react-relay, dayjs, nuqs, lodash, etc.) so the dep optimizer pre-bundles them at startup in parallel with the source scan. Avoids mid-session optimizer reloads.
  • Dev-only gzip / brotli compression (react/vite.config.ts + compression dep) — Vite dev does not compress responses by default. Aggregate session payload (~30 MB raw on this app) saturates WAN throughput and pulls every parallel HTTP/2 stream completion toward the same total_bytes / bandwidth value — exactly the "every chunk takes ~8 s regardless of size" pattern observed in the network panel. Compression drops aggregate wire bytes by ~80 % (gzip) / ~82 % (brotli q4, the package default).
  • @dicebear/collection@dicebear/shapes (VFolderNodeIdenticon[V2].tsx + react/package.json) — collection is a barrel re-exporting all 30 avatar styles. We use only shapes. Direct sub-package import removes a 620 KB compressed chunk from dev. Likely also benefits prod — @dicebear/shapes sub-package does not declare sideEffects: false, so Rollup may conservatively keep the namespace re-exports even though collection itself is marked side-effect-free.
  • scripts/verify.sh — adds a Vite warmup paths check that surfaces any warmup clientFiles entry that no longer exists on disk (after a refactor / rename), so silent "Pre-transform error" warnings don't accumulate.

Compression knob exploration

The compression package default (brotli quality 4) is intentional. Tried alternatives on a real remote dev session:

Setting Result
br q4, UV pool default (4) ~3.2 s (current PR)
br q6, UV pool default (4) ~6 s (regressed — per-request CPU saturated the 4-thread libuv pool under burst load)
br q6, UV_THREADPOOL_SIZE=12 ~3.2 s (no measurable improvement over q4)

q4 default stays — q6 needs a 3× larger thread pool just to break even, and offers no benefit when it does. UV_THREADPOOL_SIZE is a process env that can't be set from vite.config.ts cleanly anyway.

Test plan

  • Hard-refresh the dev URL from a remote browser. Slowest entry in Network panel should drop from ~12 s to ~3 s.
  • Confirm Content-Encoding: br (or gzip) on dep bundle responses (DevTools → Network → headers).
  • Avatar identicons render unchanged on the VFolder list (shape style, not blank).
  • bash scripts/verify.sh shows --- Vite warmup paths: PASS ---.

Measurements (remote session, this branch)

Step Slowest network entry
Baseline (main) ~12 s
+ warmup + optimizeDeps.include ~8 s
+ gzip / brotli compression ~4.4 s
+ @dicebear/shapes ~3.2 s

@github-actions github-actions Bot added the size:L 100~500 LoC label May 13, 2026
Copy link
Copy Markdown
Member Author


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • flow:merge-queue - adds this PR to the back of the merge queue
  • flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 13, 2026

Coverage Report for root-coverage

Status Category Percentage Covered / Total
🔵 Lines 4.77% 28 / 586
🔵 Statements 5.14% 32 / 622
🔵 Functions 7.89% 6 / 76
🔵 Branches 4.98% 18 / 361
File CoverageNo changed files found.
Generated in workflow #640 for commit bb1d07f by the Vitest Coverage Report Action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 13, 2026

Coverage Report for react-coverage (./react)

Status Category Percentage Covered / Total
🔵 Lines 6.45% 1783 / 27632
🔵 Statements 5.3% 1978 / 37268
🔵 Functions 5.18% 296 / 5713
🔵 Branches 3.71% 1293 / 34787
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
react/src/components/VFolderNodeIdenticon.tsx 0% 0% 0% 0% 17-34
react/src/components/VFolderNodeIdenticonV2.tsx 0% 0% 0% 0% 17-34
Generated in workflow #640 for commit bb1d07f by the Vitest Coverage Report Action

@yomybaby yomybaby marked this pull request as ready for review May 13, 2026 08:24
Copilot AI review requested due to automatic review settings May 13, 2026 08:24
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR aims to improve the developer experience for remote Vite dev sessions by reducing network transfer size and pre-transforming critical-path modules so first paint is faster and less RTT-bound.

Changes:

  • Add a dev-server compression middleware plugin to gzip dev responses (react/vite.config.ts).
  • Pre-declare heavy first-paint dependencies and configure server.warmup.clientFiles for first-paint modules (react/vite.config.ts).
  • Add a verification step to ensure warmup file paths actually exist (scripts/verify.sh), and update DiceBear usage/deps for identicons.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
scripts/verify.sh Adds a check to validate server.warmup.clientFiles paths exist, wired into the verify script.
react/vite.config.ts Adds dev compression middleware, optimizeDeps include list, and server warmup list for first-paint modules.
react/src/components/VFolderNodeIdenticon.tsx Switches DiceBear shapes import source (needs adjustment for correctness).
react/src/components/VFolderNodeIdenticonV2.tsx Switches DiceBear shapes import source (needs adjustment for correctness).
react/package.json Adds compression, @types/compression, and @dicebear/shapes.
pnpm-lock.yaml Lockfile updates corresponding to dependency changes.
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

Comment thread react/src/components/VFolderNodeIdenticon.tsx
Comment thread react/src/components/VFolderNodeIdenticonV2.tsx
Comment thread react/vite.config.ts
Comment thread scripts/verify.sh
@yomybaby yomybaby force-pushed the 05-13-feat_fr-2890_speed_up_vite_dev_server_for_remote_sessions branch from e2fcbba to bb1d07f Compare May 13, 2026 08:34
@yomybaby yomybaby merged commit f4e2e10 into main May 13, 2026
15 checks passed
@yomybaby yomybaby deleted the 05-13-feat_fr-2890_speed_up_vite_dev_server_for_remote_sessions branch May 13, 2026 08:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100~500 LoC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Speed up Vite dev server for remote sessions

2 participants